CSS/HTML

推荐列表 站点导航

当前位置:首页 > 脚本编程 > CSS/HTML >

css 背景不滚动的实现方法

来源:网络整理  作者:  发布时间:2020-12-17 11:54
css背景不滚动的实现方法:首先新建一个html代码页面;然后在title标签后面创建一个style标签;接着在这个标签里设置...

css背景不滚动的实现方法:首先新建一个html代码页面;然后在<title>标签后面创建一个<style>标签;接着在这个标签里设置<body>标签的背景图片;最后设置“background-repeat:no-repeat;”属性即可。

67bf2b823af91b15211eff325df4158.png

5bb3bcbab3492a5580ec9257995a694.png

css 背景不滚动的实现方法

保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。如图

样式代码:

打开html开发软件,新建一个html代码页面。

20344bc7642d8f080e8f5253ad9c33a.png

推荐:《css视频教程

body{ background-image: url(img/bg.jpg); background-repeat:no-repeat; }

67851d2f9164b936271e4247b472852.png

在html代码页面的<body>标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。如图

设置背景图片样式。在<title>标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。'

如图

8bdcdfdce0be0e94d03f520a597a163.png

保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。

dc969f8ebc8a7231d967b80242f4047.png

使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面,在body样式中添加上background-attachment: fixed即可。

相关热词: CSS 方法

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/4808.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

css 背景不滚动的实现方法

2020-12-17 编辑:

css背景不滚动的实现方法:首先新建一个html代码页面;然后在<title>标签后面创建一个<style>标签;接着在这个标签里设置<body>标签的背景图片;最后设置“background-repeat:no-repeat;”属性即可。

67bf2b823af91b15211eff325df4158.png

5bb3bcbab3492a5580ec9257995a694.png

css 背景不滚动的实现方法

保存html代码页面后刷新浏览器,这个时候滚动浏览器滚动条发现背景图片已经固定不随浏览器滚动而滚动了。如图

样式代码:

打开html开发软件,新建一个html代码页面。

20344bc7642d8f080e8f5253ad9c33a.png

推荐:《css视频教程

body{ background-image: url(img/bg.jpg); background-repeat:no-repeat; }

67851d2f9164b936271e4247b472852.png

在html代码页面的<body>标签里面输入多行段落文字,用于后面浏览器滚动条滚动的时候查看图片时候随滚动条而滚动条。如图

设置背景图片样式。在<title>标签后面创建一个<style>标签,然后在这个标签里设置<body>标签的背景图片,以及背景图片不重复。'

如图

8bdcdfdce0be0e94d03f520a597a163.png

保存html代码后使用浏览器打开,这个时候滚动浏览器滚动条发现背景图片是随浏览器滚动条的滚动而滚动的。

dc969f8ebc8a7231d967b80242f4047.png

使用background-attachment: fixed设置背景图片不随滚动条而滚动。回到html代码页面,在body样式中添加上background-attachment: fixed即可。

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jiaob/cssm/4808.shtml

相关文章

风云图片

推荐阅读

返回CSS/HTML频道首页